<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
            {{}} 用于文本渲染。
                1. 可以写 js表达式 {{js表达式}}
                2. 可以写data中返回对象中的变量名{{变量名}}
                注意：不能写等式（赋值语句）

            v-text指令：用于文本渲染
                是当做标签属性写在标签里面的
                v-text = "变量名"
                注意：v-text会覆盖标签中原有的数据,并且不能渲染HTML结构

            v-html指令: 可以渲染HTML结构,也会覆盖标签中原来的数据

            v-once指令：一次性插值，加了该指令的标签的数据只会被渲染一次，后续这个变量值改变也不会被更新
         -->

        变量名形式：{{msg}} <br>
        js表达式形式; {{x+100}}
        ----------------------------- <br><br>
        v-text指令
        <p v-text="msg"></p>

        v-html指令与v-text比较;
        <p v-html = "contentHtml"></p>
        <p v-text="contentHtml"></p>

        <h4>v-once指令</h4>
        <p v-text="x" v-once></p> <!-- 这个x值后面如果改动的话，这里是不会变的-->
    </div>
</body>

<script>
    const {createApp} = Vue;
    const app = createApp({
        data() {
            return {
                msg: 'aafafa',
                x: 100,
                contentHtml: '<span style="color: red">红色html结构</span>'
            }
        }
    }).mount("#app");
</script>
</html>